export function getSteps() {
    return [
        {
            target: '#step1',
            title: '步骤 1: 项目配置',
            content: (
                <div>
                    <p>👋 欢迎使用剪映助手！</p>
                    <p>🎯 在这里您可以配置项目的基本设置，包括：</p>
                    <ul>
                        <li>📏 画布尺寸和帧率</li>
                        <li>✏️ 文本内容和样式</li>
                        <li>🎨 文本颜色和背景</li>
                        <li>🎭 文本动画效果</li>
                        <li>🎬 视频素材配置</li>
                    </ul>
                    <p>💡 点击左侧树形菜单中的各个配置项来开始设置！</p>
                </div>
            ),
            placement: 'right' as const,
        },
        {
            target: '#step2',
            title: '步骤 2: 预览效果',
            content: (
                <div>
                    <p>🎬 这里是视频预览区域</p>
                    <p>您可以：</p>
                    <ul>
                        <li>📹 查看实时预览效果</li>
                        <li>⏯️ 播放和暂停视频</li>
                        <li>📊 查看当前配置信息</li>
                    </ul>
                    <p>💡 配置完成后点击"生成预览"按钮查看效果！</p>
                </div>
            ),
            placement: 'left' as const,
        },
        {
            target: '#step3',
            title: '步骤 3: 详细配置',
            content: (
                <div>
                    <p>⚙️ 右侧是详细配置面板</p>
                    <p>当您点击左侧配置项时：</p>
                    <ul>
                        <li>📋 这里会显示具体的配置表单</li>
                        <li>🎚️ 可以调整各种参数</li>
                        <li>🔄 配置会实时保存</li>
                    </ul>
                    <p>💡 尝试点击左侧不同的配置项看看效果！</p>
                </div>
            ),
            placement: 'left' as const,
        },
    ];
}
